<template>
  <!-- recommend vue prop sort
  is v-for v-if v-else-if v-else v-show v-cloak v-pre v-once id ref key slot v-model all-normal-props v-bind v-on v-html v-text-->
  <div>
    <div class="describe-wrap">
      <div class="add-btn">
        <span class="text-btn" @click="uploadGoodsImg">添加</span>
      </div>
      <div class="img-wrap">
        <swiper
          class="img-block"
          :current="imgIdx"
          @change="handleSwpierChange"
        >
          <swiper-item v-for="(item,idx) in imgList" :key="idx">
            <div class="swiper-item-block">
              <img
                v-if="!item.url"
                key="1"
                src="https://akk.028wkf.cn/kdb-weapp-img/icon/ghtp.png"
                mode="aspectFit"
                class="bg-icon"
              >
              <div v-else key="2" class="img-preview">
                <img :src="item.url" mode="aspectFit" class="goods-img">
                <span
                  class="delete-icon"
                  @click="deleteGoodsImg(item.key)"
                >&times;</span>
              </div>
            </div>
          </swiper-item>
        </swiper>
      </div>
      <button class="btn-round-blue" @click="handleSave">保存</button>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import { UPLOAD_IMAGE2 } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      imgIdx: 0,
      form: {
        indexImg: '',
        describeImg1: '',
        describeImg2: '',
        describeImg3: ''
      },
      list1: ['indexImg', 'describeImg1', 'describeImg2', 'describeImg3']
    }
  },
  computed: {
    imgList () {
      let base = []

      let urlList = this.list1.map(key => {
        if (this.form[key] && this.form[key] !== 'NULL') {
          return this.form[key]
        } else {
          return ''
        }
      })

      this.list1.forEach((key, idx, arr) => {
        let url = urlList[idx]

        let end = urlList.filter((_, i) => i > idx && _)

        if (url || key === 'indexImg' || end.length) {
          base.push({ key, url })
        }
      })
      return base
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.initPage()
  },
  methods: {
    initPage () {
      const vm = this
      let obj1 = vm.$cookie.get('describe-img1')
      let obj2 = vm.$cookie.get('describe-img2')
      let obj = obj2 || obj1
      if (obj) {
        vm.list1.forEach(key => {
          if (obj[key]) {
            vm.form[key] = obj[key]
          }
        })
      } else {
        for (const key in vm.form) {
          if (vm.form.hasOwnProperty(key)) {
            vm.form[key] = ''
          }
        }
      }
    },

    handleSwpierChange (e) {
      let val = e.target.current
      this.imgIdx = val
    },
    handleSave () {
      this.$cookie.set('describe-img2', this.form)
      this.$router.go(-1)
    },

    uploadGoodsImg () {
      const vm = this

      let key = vm.list1.filter(_ => !vm.form[_])[0]
      if (!key) {
        return false
      }

      UPLOAD_IMAGE2()
        .then(r => {
          let res = JSON.parse(r.data)
          if (res.code === '0') {
            vm.form[key] = res.data.imgPath
          } else {
            vm.$toast(res.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    deleteGoodsImg (key) {
      this.form[key] = 'NULL'
      let end = this.imgList.length - 1
      if (this.imgIdx > end) {
        this.imgIdx = end < 0 ? 0 : end
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.describe-wrap {
  padding: 15px;
  > .add-btn {
    text-align: right;
    margin-bottom: 10px;
    > .text-btn {
      font-size: 15px;
      color: $blue;
    }
  }
  > .img-wrap {
    padding: 15px;
    > .img-block {
      border: 1px solid $gray;
      border-radius: 4px;
      width: 100%;
      height: 180px;
      overflow: hidden;
      .swiper-item-block {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        > .bg-icon {
          width: 90px;
          height: 90px;
        }
        > .img-preview {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          > .goods-img {
            width: 100%;
            height: 100%;
          }
          > .delete-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            display: block;
            width: 20px;
            height: 20px;
            background-color: $white;
            color: $red;
            text-align: center;
            font-size: 20px;
            line-height: 18px;
            border-radius: 50%;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
